<template>
  <!-- 养殖档案新增
      props: tableAdd_visible：显示隐藏  baseOptions：基地 SKUList：产品SKU
      emit: finish：关闭刷新 closeAddDialog：关闭弹窗 -->
  <div>
    <el-dialog :title="dialogtitle" :visible.sync="tableAdd_visible" width="710px" :before-close="tableClose">
      <el-form ref="addFormRef" :model="addForm" label-width="110px" :rules="addFormRules">
        <el-row>
          <el-col :span="12">
            <el-form-item label="基地" prop="baseId">
                <el-select v-model="addForm.baseId" placeholder="请选择基地" clearable @change="selectGetBase">
                  <el-option
                    v-for="item in baseOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="养殖开始时间" prop="farmingTime">
              <el-date-picker :picker-options="pickerOptions" v-model="addForm.farmingTime" type="datetime"
                format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="养殖状态" prop="farmingStatus">
              <el-select v-model="addForm.farmingStatus" placeholder="请选择使用状态" clearable @change="selectGetStatu">
                  <el-option
                    v-for="item in statusOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="养殖规模(只)" prop="farmingAmount">
              <el-input v-model="addForm.farmingAmount"></el-input>
            </el-form-item>
          </el-col>
          
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="产品SKU" prop="productSkuNumber">
              <el-select v-model="addForm.productSkuNumber" placeholder="请选择产品SKU" clearable @change="selectGetSKU">
                  <el-option
                    v-for="item in SKUList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="备注" prop="remarks">
          <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="addForm.remarks">
          </el-input>
        </el-form-item>
        <el-row>
          <el-col :span="6">
            <el-form-item>
            </el-form-item>
          </el-col>
          <el-col :span="18">
            <el-form-item>
              <el-button type="primary" @click="addformOnSubmit" v-auth="'breed_product_insert'">立即创建</el-button>
              <el-button @click="closeform">取消</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
  // 接口数据
  import {
    newProduction
  } from "@/Api/productionmanage/ProductionInfo"
  export default {
    name: 'ProductionInfoTableAddForm',
    props: {
      tableAdd_visible: {
        type: Boolean,
        default: false
      },
      baseOptions: {
        type: Array,
        default: () => []
      },
      SKUList: {
        type: Array,
        default: () => []
      },
    },
    data() {
      return {
        // 表单内容
        addForm: {
          baseId: "",
          farmingAmount: "",
          farmingStatus: "",
          farmingTime: "",
          productSkuNumber: "",
          remarks: "",
        },
        // 表单规则
        addFormRules: {
          farmingAmount: [{
            required: true,
            message: '请输入'
          }],
          farmingStatus: [{
            required: true,
            message: '请输入"养殖中"/"已出栏"'
          }],
          farmingTime: [{
            required: true,
            message: '请输入'
          }],
          productSkuNumber: [{
            required: true,
            message: '请输入'
          }],
          baseId: [{
            required: true,
            message: '请输入'
          }],
        },
        // 表单标题
        dialogtitle: "新建养殖档案",
        // 日期时间选择器快捷按钮
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
        },
        // 养殖档案状态选择
        statusOptions: [{
          value: '0',
          label: '养殖中'
        }, {
          value: '1',
          label: '已出栏'
        }],
      }
    },
    created() {
    },
    methods: {
      // 关闭编辑弹窗
      tableClose() {
        this.$confirm('确认关闭？')
          .then(_ => {
            this.closeform();
          })
          .catch(_ => {});
      },
      // 编辑弹窗确定
      addformOnSubmit() {
        this.$refs["addFormRef"].validate(async (valid) => {
          if (valid) {
            console.log("addForm:" , this.addForm);
            const {
              data: res
            } = await newProduction(this.addForm)
            if (res.statusCode === 20000) {
              this.closeform();
              this.$emit("finish")
              return this.$message.success("新增养殖档案成功");
            } else {
              console.log(res.message);
              return this.$message.error("新增养殖档案失败");
            }
          } else {
            return this.$message.error("请输入完整信息");
          }
        });
      },
      // 养殖基地选择器
    selectGetBase(vId){
      let obj = {};
      obj = this.baseOptions.find((item)=>{
          return item.value === vId;//筛选出匹配数据
      });
      this.addForm.baseId=obj.value;
    },
    // 养殖状态选择器
      selectGetStatu(vId){
      let obj = {};
      obj = this.statusOptions.find((item)=>{
          return item.value === vId;//筛选出匹配数据
      });
      this.addForm.farmingStatus =obj.label;
    },
    // SKU选择器
      selectGetSKU(vId){
      let obj = {};
      obj = this.SKUList.find((item)=>{
          return item.value === vId;//筛选出匹配数据
      });
      this.addForm.productSkuNumber =obj.label;
    },
      // 关闭编辑表单弹窗
      closeform() {
        var a = false;
        this.$emit("closeAddDialog", a);
        // 清空表单
        this.resetform();
        // }
      },
      resetform() {
        this.$nextTick(() => {
          this.$refs.addFormRef.resetFields();
        })
      },

    },
  }

</script>
<style>

</style>
